<template>
	<view class="bizPage">
		<status-bar title="通知公告" />
		<view class="tabs bgwhite" :style="{top: totalHeight + 'px'}">
			<up-tabs :list="tabList" :scrollable="false" :lineColor="mainStore.color" lineWidth="18" :activeStyle="{color:'#222',fontWeight:'bold'}"
				@click="tabClick"></up-tabs>
		</view>
		<view class="padding20" style="margin-top: 44px;">
			<view class="item bgwhite d-flex a-center m-bot20" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
				<image class="icon m-right20" :src="staticImg + 'notice.png'"></image>
				<view class="flex-1">
					<view class="size28 color-333 bold ellipsis_1 m-bot20">{{ item.noticeTitle }}</view>
					<view class="d-flex j-sb color-999">
						<view class="size24">发布人：{{ item.createBy }}</view>
						<view class="size24">{{ item.createTime }}</view>
					</view>
				</view>
			</view>
			
			<up-empty :show="noData" mode="list" marginTop="100"></up-empty>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { staticImg } from '@/utils/config.js'
	import { useMainStore } from '@/stores/index'
	import { toUrl, Toast } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	const mainStore = useMainStore()
	const totalHeight = computed(() => {
		return mainStore.statusBarHeight + mainStore.navBarHeight
	})
	const tabList = ref([
		{ name: '全部', is_read: '' },
		{ name: '未读', is_read: '0' },
		{ name: '已读', is_read: '1' }
	])
	
	const list = ref([])
	const is_read = ref('')
	const page = ref(1)
	const limit = ref(10)
	const noData = ref(false)
	const noMore = ref(false)
	
	onLoad(() => {
		getList()
	})
	
	const getList = () => {
		noData.value = false
		noMore.value = false
		Http.get({
			url: '/hr/getNoticeList',
			data: {
				is_read: is_read.value,
				page: page.value,
				limit: limit.value
			}
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.data.list || []
			list.value = page.value == 1 ? result : list.value.concat(result)
			if(!list.value.length) noData.value = true
			if(result.length < limit.value) noMore.value = true
		})
	}
	
	const tabClick = (item) => {
		is_read.value = item.is_read
		page.value = 1
		getList()
	}

	const toDetail = (item) => {
		if(item.noticeType == 2 && item.createBy == 'process') return toUrl('/bizPage/task/details?processInstanceId=' + item.noticeUrl)
		toUrl('/bizPage/notice/details?id=' + item.noticeId)
	}

	onReachBottom(() => {
		if(noMore.value) return
		page.value ++
		getList()
	})
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #F6F7FB;
	}  
	.tabs {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 11;
	}
	.item {
		height: 150rpx;
		box-shadow: 0rpx 3rpx 16rpx 0rpx rgba(182,182,182,0.39);
		border-radius: 20rpx;
		border: 1rpx solid #E5E7E9;
		padding: 0 30rpx;
		.icon {
			width: 66rpx;
			height: 66rpx;
		}
	}
</style>
